<script setup lang="ts">
import { ref } from 'vue'

const selectedParams = ref({
  style: '写实',
  quality: '高质量',
  size: '1024x1024'
})

const generatedImages = ref([
  'https://r.hpoi.net/gk/pic/s/2025/06/bf3d44801e8847cfbd7628ce536ef044.jpg?date=1749627783',
  'https://r.hpoi.net/gk/pic/s/2025/06/bf3d44801e8847cfbd7628ce536ef044.jpg?date=1749627783',
  'https://r.hpoi.net/gk/pic/s/2025/06/bf3d44801e8847cfbd7628ce536ef044.jpg?date=1749627783',
  'https://r.hpoi.net/gk/pic/s/2025/06/bf3d44801e8847cfbd7628ce536ef044.jpg?date=1749627783'
])

const handleParamChange = (type: string, value: string) => {
  selectedParams.value[type as keyof typeof selectedParams.value] = value
}

const generateImages = () => {
  // 生成图片的逻辑
  console.log('生成图片', selectedParams.value)
}

const saveAllImages = () => {
  // 保存所有图片的逻辑
  console.log('保存所有图片')
}

const saveImage = (index: number) => {
  // 保存单张图片的逻辑
  console.log('保存图片', index)
}

const regenerateImages = () => {
  // 重新生成图片的逻辑
  console.log('重新生成图片', selectedParams.value)
}
</script>

<template>
  <div class="setting-container">
    <div class="header-section">
      <h1>拓展图片</h1>
      <p>扩展和优化您的图片资源。</p>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧：图片和参数按钮 -->
      <div class="left-section">
        <!-- 图片展示区域 -->
        <div class="image-display-area">
          <div class="main-image">
            <img src="https://r.hpoi.net/gk/pic/s/2025/06/bf3d44801e8847cfbd7628ce536ef044.jpg?date=1749627783"
              alt="主要展示图片" />
          </div>
        </div>

        <!-- 参数按钮区域 -->
        <div class="params-section">
          <div class="param-group">
            <label>风格:</label>
            <div class="param-buttons">
              <button v-for="style in ['写实', '卡通', '油画', '素描']" :key="style"
                :class="{ active: selectedParams.style === style }" @click="handleParamChange('style', style)">
                {{ style }}
              </button>
            </div>
          </div>

          <div class="param-group">
            <label>质量:</label>
            <div class="param-buttons">
              <button v-for="quality in ['标准', '高质量', '超高清']" :key="quality"
                :class="{ active: selectedParams.quality === quality }" @click="handleParamChange('quality', quality)">
                {{ quality }}
              </button>
            </div>
          </div>

          <div class="param-group">
            <label>尺寸:</label>
            <div class="param-buttons">
              <button v-for="size in ['512x512', '1024x1024', '1536x1536']" :key="size"
                :class="{ active: selectedParams.size === size }" @click="handleParamChange('size', size)">
                {{ size }}
              </button>
            </div>
          </div>

          <button class="generate-btn" @click="generateImages">
            生成图片
          </button>
        </div>
      </div>

      <!-- 右侧：生成的图片 -->
      <div class="right-section">
        <!-- 生成的图片展示 -->
        <div class="generated-images">
          <div class="content-header">
            <h3>生成的图片</h3>
            <div class="action-buttons">
              <button class="save-all-btn" @click="saveAllImages">全部保存</button>
              <button class="regenerate-btn" @click="regenerateImages">重新生成</button>
            </div>
          </div>

          <div class="images-grid">
            <div v-for="(image, index) in generatedImages" :key="index" class="image-item">
              <div class="image-wrapper">
                <img :src="image" :alt="`生成图片 ${index + 1}`" />
              </div>
              <div class="image-actions">
                <button class="save-btn" @click="saveImage(index)">保存</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.setting-container {
  max-width: 1200px;
  margin: 0 auto;

  // 头部区域 - h1和p在同一行
  .header-section {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 30px;

    h1 {
      color: #2c3e50;
      margin: 0;
      font-size: 2rem;
    }

    p {
      color: #6c757d;
      margin: 0;
      font-size: 1rem;
    }
  }

  // 主要内容区域 - 左右布局
  .main-content {
    display: flex;
    gap: 40px;
    align-items: flex-start;

    // 左侧区域
    .left-section {
      flex: 0 0 400px; // 固定宽度400px

      // 图片展示区域
      .image-display-area {
        margin-bottom: 20px;

        .main-image {
          width: 100%;
          max-width: 400px;
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

          img {
            width: 100%;
            height: auto;
            display: block;
          }
        }
      }
    }

    // 右侧区域
    .right-section {
      flex: 1; // 占据剩余空间
    }
  }

  // 参数按钮区域
  .params-section {
    background: #ffffff;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

    .param-group {
      margin-bottom: 25px;

      &:last-child {
        margin-bottom: 0;
      }

      label {
        display: block;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 12px;
        font-size: 1.1rem;
      }

      .param-buttons {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;

        button {
          padding: 8px 20px;
          border: 2px solid #e9ecef;
          background: #ffffff;
          border-radius: 25px;
          cursor: pointer;
          transition: all 0.3s ease;
          font-size: 14px;
          font-weight: 500;
          color: #495057;

          &:hover {
            border-color: #007bff;
            color: #007bff;
          }

          &.active {
            background: #007bff;
            border-color: #007bff;
            color: #ffffff;
          }
        }
      }
    }

    .generate-btn {
      width: 100%;
      padding: 15px;
      background: linear-gradient(135deg, #007bff, #0056b3);
      color: #ffffff;
      border: none;
      border-radius: 8px;
      font-size: 1.1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-top: 20px;

      &:hover {
        background: linear-gradient(135deg, #0056b3, #004085);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
      }
    }
  }

  // 生成的图片展示区域
  .generated-images {
    background: #ffffff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

    .content-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      border-bottom: 2px solid #e9ecef;
      padding-bottom: 10px;

      h3 {
        color: #2c3e50;
        margin: 0;
        font-size: 1.5rem;
      }

      .action-buttons {
        display: flex;
        gap: 10px;

        .save-all-btn,
        .regenerate-btn {
          padding: 10px 20px;
          border: none;
          border-radius: 6px;
          font-size: 14px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.3s ease;
        }

        .save-all-btn {
          background: #28a745;
          color: #ffffff;

          &:hover {
            background: #218838;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
          }
        }

        .regenerate-btn {
          background: linear-gradient(135deg, #007bff, #0056b3);
          color: #ffffff;

          &:hover {
            background: linear-gradient(135deg, #0056b3, #004085);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
          }
        }
      }
    }

    .images-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;

      .image-item {
        .image-wrapper {
          border-radius: 8px;
          overflow: hidden;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          margin-bottom: 10px;
          transition: all 0.3s ease;

          &:hover {
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
            transform: translateY(-2px);
          }

          img {
            width: 100%;
            height: auto;
            display: block;
          }
        }

        .image-actions {
          display: flex;
          justify-content: flex-end;

          .save-btn {
            padding: 8px 16px;
            background: #28a745;
            color: #ffffff;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;

            &:hover {
              background: #218838;
              transform: translateY(-1px);
              box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
            }
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .setting-container {

    // 移动端改为垂直布局
    .main-content {
      flex-direction: column;
      gap: 20px;

      .left-section {
        flex: none;
        width: 100%;

        .image-display-area {
          .main-image {
            max-width: 100%;
          }
        }
      }

      .right-section {
        width: 100%;
      }
    }

    .params-section {
      padding: 20px;
      margin-bottom: 20px;

      .param-group {
        .param-buttons {
          button {
            padding: 6px 15px;
            font-size: 13px;
          }
        }
      }
    }

    .generated-images {
      padding: 20px;

      .images-grid {
        grid-template-columns: 1fr;
        gap: 15px;
      }
    }
  }
}
</style>
